<script setup lang="ts">
import { defaultNumber } from '@/utils'

defineOptions({ name: 'ElectricQualityAnalysisCard' })
defineProps<{
  name: string
  value: number | string
  iconWrapperClass?: string
}>()
</script>

<template>
  <div class="alpha-block h-full min-w-240px flex flex-1 items-center gap-4 bg-white px-3">
    <div class="h-16 w-16 flex items-center justify-center rounded bg-gradient-to-b" :class="iconWrapperClass">
      <ElIcon :size="36">
        <slot>
          <svg t="1732847504758" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="48" height="48"><path d="M508.50474667 128.68721778L29.94631111 270.97315555h958.86449778zM29.94631111 270.97315555v520.35584h958.71886222V270.97315555H29.94631111z m257.77493334 281.07662223h-118.83861334V389.66613333H287.72124445v162.38364445z m257.62929777 0h-118.83861333V389.66613333h118.83861333v162.38364445z m302.92195556 138.93632H689.23847111V389.66613333h158.88839111v301.31996445z" p-id="9148" fill="#ffffff" /><path d="M989.53898667 792.05717333H29.21813333V270.24497778h960.17521778v521.81219555z m-958.86449778-1.45635555h957.26250666V271.70133333H30.67448889v518.89948445z m818.32618666-98.88654223H688.51029333V388.93795555h160.34474667v302.77632z m-159.03402666-1.45635555h157.43203556V390.39431111H689.96664889v299.86360889zM546.07872 552.77795555h-120.29496889V388.93795555h120.29496889V552.77795555z m-118.83861333-1.45635555h117.38225778V390.39431111h-117.38225778V551.3216z m-138.79068445 1.45635555h-120.29496889V388.93795555h120.29496889V552.77795555z m-118.83861333-1.45635555h117.38225778V390.39431111h-117.38225778V551.3216zM172.23224889 955.02336c-43.25376 0-78.6432-35.38944-78.6432-78.6432s35.38944-78.6432 78.6432-78.6432 78.6432 35.38944 78.6432 78.6432-35.38944 78.6432-78.6432 78.6432z" p-id="9149" fill="#ffffff" /><path d="M844.92288 955.02336c-43.25376 0-78.6432-35.38944-78.6432-78.6432s35.38944-78.6432 78.6432-78.6432 78.6432 35.38944 78.6432 78.6432-35.38944 78.6432-78.6432 78.6432z" p-id="9150" fill="#ffffff" /></svg>
        </slot>
      </ElIcon>
    </div>
    <div class="flex-auto">
      <p class="m-0">
        {{ name }}
      </p>
      <div class="fs-12 mt-4 flex items-center gap-3">
        <strong class="text-sm">{{ defaultNumber(value) }}</strong>
        个
      </div>
    </div>
  </div>
</template>
